<!--
 * @Description: 
 * @Author: qingyang
 * @Date: 2022-04-24 15:21:52
 * @LastEditors: qingyang
 * @LastEditTime: 2022-05-10 18:33:41
-->

<template>
  <div class="chart-wrap">
    <div id="chart1" class="chart" ref="pieRef"></div>
    <div id="chart2" class="chart" ref="pieChartRef"></div>
  </div>
</template>
<script lang="ts" setup>
import { withDefaults, defineProps, ref, watch, defineEmits } from 'vue';
import * as echarts from 'echarts';
import { loadRawMateria, loadLifeCycle } from '@/apis/pcf/report/report';
interface IData {
  name: string;
  value: string | number;
}
interface IProps {
  reportNo: string;
}
const props = withDefaults(defineProps<IProps>(), {});
const emit = defineEmits(['finish']);
const finish = ref(false);
const pieChartRef = ref();
const pieRef = ref();
const colors = [
  '#479FBF',
  '#2F817E',
  '#EFF0DB',
  '#2B9E81',
  '#03614F',
  '#2BC396',
  '#B2E1DD',
  '#CECEC3',
  '#16444A',
  '#43B9AC',
  '#416D67',
  '#6C9585',
  '#C1CFA9',
  '#E5E4CE',
  '#22384A',
  '#96CFED',
  '#E2DAB8',
  '#C7CACB',
  '#56595A',
  '#2E7C7B',
  '#90D5D4',
  '#2EA6A7',
  '#2B827B',
  '#F0EEDA',
  '#CBCECD',
  '#002E45',
  '#6C8AA4',
  '#A8C1D5',
  '#A1ABA0',
  '#3A7C73'
];
// function getRandomColor() {
//   return `#${Math.floor(Math.random() * 0xffffff).toString(16)}`;
// }
const loadOption = (data: IData[], colors: string[]) => {
  let nameArr = data.map((item: IData) => {
    return item.name;
  });
  return {
    grid: {
      top: '10%'
    },
    tooltip: null,
    legend: [
      {
        textStyle: {
          color: '#51596C',
          fontSize: 14
        },
        itemGap: 18,
        itemWidth: 14,
        itemHeight: 14,
        bottom: 20,
        data: nameArr
      }
    ],
    series: [
      {
        center: ['50%', '42%'],
        top: '5%',
        type: 'pie',
        // radius: ['30%', '60%'],
        avoidLabelOverlap: false,
        color: colors,
        itemStyle: {
          //   borderRadius: 8,
          //   borderColor: '#151515',
          //   borderWidth: 1
        },
        label: {
          formatter: (params: any) => {
            return '{a|' + params.name + '}' + '\n{b|' + params.value + '}';
          },
          rich: {
            a: {
              color: '#2C3542'
            },
            b: {
              color: '#2C3542',
              fontWeight: 'bold',
              lineHeight: '28'
            }
          }
          //   formatter: '{b} \n{d}%'
        },
        labelLine: {
          lineStyle: {
            color: '#41618072'
          },
          smooth: 0,
          length: 16,
          length2: 16
        },
        data
      }
    ]
  };
};
const loadBarOptions = (data: any[]) => {
  let max = 0;
  // let colors = [] as string[];
  for (let i = 0; i < data.length; i++) {
    const item = data[i];
    max += Number(item.value);
    // colors.push(getRandomColor());
  }
  let seriesList = [] as any[];
  // 处理初始化数据
  for (let i = 0; i < data.length; i++) {
    const item = data[i];
    seriesList.push({
      name: data[i].name,
      type: 'bar',
      stack: 'value',
      barWidth: 28,
      label: {
        show: false,
        color: '#fff'
      },
      data: [
        {
          value: (Number(item.value) * 100) / max,
          originalValue: item.value
        }
      ]
    });
  }
  console.log('bottom', (data.length / 8) * 40 + 60);
  console.log('bottom seriesList', seriesList);
  let option: any = {
    color: colors,
    legend: {
      x: 'center',
      bottom: 0,
      itemWidth: 14,
      itemHeight: 14
    },
    grid: {
      top: 0,
      left: 20,
      bottom: (data.length / 8) * 40 + 50,
      right: 20,
      containLabel: true
    },
    xAxis: {
      type: 'value',
      min: 0,
      max: 100,
      axisLabel: {
        formatter: function (value: string) {
          return value + '%';
        }
      },
      show: true
    },
    yAxis: {
      type: 'category',
      show: false
    },
    series: seriesList
  };

  return option;
};

const loadChart = (data: IData[]) => {
  let pieChart = echarts.init(pieChartRef.value);
  pieChart.setOption(loadBarOptions(data), true);
};
const loadPie = (data: IData[]) => {
  let pieChart = echarts.init(pieRef.value);
  pieChart.setOption(loadOption(data, ['#D58180', '#7D987F', '#E8B965']), true);
};

watch(
  () => props.reportNo,
  val => {
    if (val) {
      loadAllData(val);
    }
  }
);
const loadAllData = async (taskNo: string) => {
  finish.value = false;
  let data = await loadLifeCycle(taskNo);
  let materiaData = await loadRawMateria(taskNo);
  loadChart(materiaData);
  loadPie(data);
  finish.value = true;
  setTimeout(() => {
    // 延时2000确保图表生成完毕
    emit('finish');
  }, 2000);
};
</script>
<style lang="scss" scoped>
.chart-wrap {
  position: fixed;
  width: 1000px;
  z-index: -1;
  left: -1000px;
  background: #fff;
  .chart {
    width: 800px;
    height: 400px;
  }
  .flow {
    width: 1000px;
    height: 500px;
  }
}
</style>
